<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
<script type="text/javascript">
	var global = {
	      cxt: '#(cxt ??)',
	      cxtWithHost: '#(cxtWithHost ??)',
	      preloadGif:'#(cxt ??)/image/preload.gif'
	  };
	
	Date.prototype.format = function(fmt) { // author: meizz
		var o = {
			"M+" : this.getMonth() + 1, // 月份
			"d+" : this.getDate(), // 日
			"h+" : this.getHours(), // 小时
			"m+" : this.getMinutes(), // 分
			"s+" : this.getSeconds(), // 秒
			"q+" : Math.floor((this.getMonth() + 3) / 3), // 季度
			"S" : this.getMilliseconds()
		// 毫秒
		};
		if (/(y+)/.test(fmt))
			fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
					.substr(4 - RegExp.$1.length));
		for ( var k in o)
			if (new RegExp("(" + k + ")").test(fmt))
				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
						: (("00" + o[k]).substr(("" + o[k]).length)));
		return fmt;
	};
</script>
<script type="text/javascript" src="#(cxt ??)/plugin/jquery/jquery-2.2.2.min.js"></script>
<title>扫描监控</title>
<link rel="stylesheet" href="#(cxt ??)/plugin/layui/css/layui.css"  media="all">
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
		<legend>扫描监控</legend>
	</fieldset>

	<div class="layui-row">
		<div class="layui-col-xs10">
			<div class="grid-demo grid-demo-bg1">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<label class="layui-form-label">自动刷新</label>
						<div class="layui-input-block">
							<input type="checkbox" name="close" lay-skin="switch" lay-filter="switchTest"
								lay-text="ON|OFF">
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="layui-col-xs2">
			<div id="average-time" class="grid-demo" style="height: 38px;line-height: 38px;"></div>
		</div>
	</div>

	

	<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
		<ul id="lab" class="layui-tab-title">
			<li data="awaiter" class="layui-this">请求等待记录</li>
			<li data="record">请求完成记录</li>
		</ul>
		<div class="layui-tab-content" style="height: 100px;">
			<div class="layui-tab-item layui-show">
				<table id="awaiter" class="layui-table" lay-size="lg">
					<colgroup>
						<col>
						<col>
						<col width="100">
					</colgroup>
					<thead>
						<tr>
							<th style="width: 300px;">标识</th>
							<th>数据</th>
							<th style="width: 150px;">创建时间</th>
							<th style="width: 100px;">等待时间(ms)</th>
							<th style="width: 50px;">操作</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
			<div class="layui-tab-item">
				<table id="record" class="layui-table" lay-size="lg">
					<colgroup>
						<col>
						<col>
						<col>
					</colgroup>
					<thead>
						<tr>
							<th>标识</th>
							<th>等待时间(ms)</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<script src="#(cxt ??)/plugin/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">

$(function() {
	

		var module = function() {
			//包含常量及url的地址
			var configs = {
				ajax : {
					record : 'szv/record',
					awaiter : 'szv/awaiter',
					unlock : 'szv/unlock'
				},
				interval: null
			}
			//接口数据
			var datas = {
				ajax : function(para) {
					if (!para)
						para = {}
					if (!para.data)
						para.data = {}
					para.data.fullget = true

					return $.ajax(para).done(function(res) {
						if (res.status != 'ok')
							console.log(para.url + ':' + JSON.stringify(res));
					})
				},
				record : function(para) {
					para.url = configs.ajax[arguments.callee.name]
					return this.ajax(para)
				},
				awaiter : function(para) {
					para.url = configs.ajax[arguments.callee.name]
					return this.ajax(para)
				},
				unlock : function(para) {
					para.url = configs.ajax[arguments.callee.name]
					return this.ajax(para)
				}
			}

			//数据处理及模块中方法处理
			var handlers = {
				record : function() {
					datas.record({}).done(function(res) {
						var time = 0, count = 0
						$('#record tbody').html('')
						$('#average-time').html('')
						$(res).each(function(i, e) {
							count += 1
							time += parseFloat(`${e.interval}`)
							var tr = ``
							tr += `<tr>`
							tr += `  <td>${e.code}</td>`
							tr += `  <td>${e.interval}</td>`
							tr += `</tr>`

							$('#record tbody').prepend($(tr).attr('data', `${e.code}`))
						})
						if(count != 0)
							$('#average-time').html('平均耗时（ms）：' + (time/count))
					})
				},
				awaiter : function() {
					datas.awaiter({}).done(function(res) {
						$('#awaiter tbody').html('')
						$('#average-time').html('')
						for ( var key in res) {
							var tr = ``
								tr += `<tr>`
								tr += `  <td>${key}</td>`
								tr += `  <td>${res[key].data}</td>`
								tr += `  <td>${new Date(res[key].date).format("yyyy-MM-dd hh:mm:ss")}</td>`
								tr += `  <td>${res[key].dateInterval}</td>`
								tr += `  <td><button class="unlock layui-btn layui-btn-sm layui-btn-normal">解锁</button></td>`
								tr += `</tr>`

							$('#awaiter tbody').prepend($(tr).attr('data', `${key}`))
						}
					})
				},
				unlock : function(unionCode) {
					datas.unlock({
						data : {
							unionCode : unionCode
						}
					}).done(function(res) {
						handlers.awaiter()
					})
				},
				refreshStart: function() {
					configs.interval = setInterval(function() {
						var data = $('.layui-this').attr('data')
						handlers[data]()
					}, 1000)
					
				},
				refreshStop: function() {
					clearInterval(configs.interval)
				}
				
			}
			//事件处理
			this.events = function() {
				//lab切换处理
				$('body').on('click', '#lab li', function() {
					var data = $(this).attr('data')
					handlers[data]()
				})

				//解锁
				$('body').on('click', '.unlock', function() {
					var data = $(this).closest('tr').attr('data')
					handlers.unlock(data)
				})
				return this
			},
			
			this.layui = function() {
				layui.use(['form', 'element'], function(){
					var form = layui.form,
					layer = layui.layer

					//监听指定开关
					form.on('switch(switchTest)', function(data) {
						if (this.checked) {
							handlers.refreshStart()
						} else {
							handlers.refreshStop()
						}
					});
				});
				
				return this
			},

			this.init = function() {
				handlers.awaiter()
				return this
			}
		};

		new module().events().init().layui()
	})
</script>

</body>
</html>